<template>
  <view style="padding-top: 100rpx;">
    <!-- 输入值区域 -->
    <view class="text-area">
      <text>输入值：</text>
      <input 
        type="text" 
        v-model="title" 
        style="color: red; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 10rpx; border-radius: 4rpx;" 
      />
    </view>

    <!-- 回传值区域 -->
    <view class="text-area">
      <text>回传值：</text>
      <input 
        type="text" 
        :value="callbackValue" 
        style="color: black; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 10rpx; border-radius: 4rpx;" 
      />
    </view>

    <!-- 子组件A（父传子） -->
    <comA :intent="title"></comA>

    <!-- 子组件B（子传父 + 兄弟传值接收） -->
    <comB @callbackFun="callback"></comB>
  </view>
</template>

<script>
// 引入子组件
import comA from '../../components/comA/comA.vue'
import comB from '../../components/comB/comB.vue'

export default {
  components: { comA, comB }, // 注册组件
  data() {
    return {
      title: '', // 绑定输入值
      callbackValue: '' // 绑定子组件B回传的值
    }
  },
  methods: {
    // 接收子组件B的回传值
    callback(val) {
      this.callbackValue = val
    }
  }
}
</script>

<style scoped>
.text-area {
  margin: 20rpx 0;
}
</style>